<!-- 发情记录 -->
<template>
	<view class="header">
		<view class="title">
			牧民信息 （操作员）
		</view>
		<uni-list>
			<view class="item">
				<uni-list-item title="牧民"></uni-list-item>
				<uv-input placeholder="请输入牧民姓名" inputAlign="right" border="none" v-model="farmerInfo.name"></uv-input>
			</view>
			<view class="item">
				<uni-list-item title="电话"></uni-list-item>
				<uv-input placeholder="请输入电话" inputAlign="right" border="none" v-model="farmerInfo.phone"></uv-input>
			</view>
			<view class="item">
				<uni-list-item title="地址"></uni-list-item>
				<uv-input placeholder="请输入地址" inputAlign="right" border="none" v-model="farmerInfo.address"></uv-input>
			</view>

		</uni-list>
		<view class="title">
			添加牲畜
		</view>
		<uni-list>
			<navigator url="/pages/management/child/components/Selection">
				<uni-list-item title="选择牲畜" :rightText="livestock.imei ? `IMEI ${livestock.imei} >` : '未选择'"
					show-arrow="true"></uni-list-item>
			</navigator>
			<uni-list-item title="实际发情时间" :rightText="livestock.actualHeatTime || '未选择'" :clickable="true"
				@click="openCalendar('actual')"></uni-list-item>
			<uni-list-item title="预测发情时间" :rightText="livestock.predictedHeatTime || '未选择'" :clickable="true"
				@click="openCalendar('predicted')"></uni-list-item>
			<uv-calendar ref="calendarRef" @confirm="handleConfirm" />
		</uni-list>
		<view class="title1">
			<view>备注：</view>
			<textarea class="remark-input" placeholder="请输入备注信息" auto-height :maxlength="-1"
				v-model="remark"></textarea>
		</view>
		<button class="btn" @click="submitForm">提交</button>
	</view>
</template>

<script setup>
	import {
		ref,onMounted,onUnmounted
	} from 'vue';
	import {
		addBreeding
	} from '@/utils/api/Management.js'

	// 牧民信息
	const farmerInfo = ref({
		name: '',
		phone: '',
		address: ''
	});

	// 牲畜信息
	const livestock = ref({
		imei: '',
		actualHeatTime: '',
		predictedHeatTime: ''
	});

	// 备注
	const remark = ref('');
	const calendarRef = ref(null);
	// 记录当前选择的是实际发情时间还是预测发情时间
	const currentDateType = ref('');

	const openCalendar = (type) => {
		currentDateType.value = type;
		calendarRef.value?.open();
	};

	const handleConfirm = (e) => {
		if (Array.isArray(e)) {
			if (currentDateType.value === 'actual') {
				livestock.value.actualHeatTime = e[0];
			} else if (currentDateType.value === 'predicted') {
				livestock.value.predictedHeatTime = e[0];
			}
		}
	};
	
	// 监听子页面传递的选中牲畜事件
	onMounted(() => {
		const handleLivestockSelected = (selectedImeiList) => {
			if (selectedImeiList && selectedImeiList.length > 0) {
				livestock.value.imei = selectedImeiList.join(', '); // 多个 IMEI 用逗号分隔
				console.log('接收到选中的牲畜IMEI:', livestock.value.imei);
			} else {
				livestock.value.imei = '';
			}
		};
	
		uni.$on('livestockSelected', handleLivestockSelected);
		// 页面卸载时移除事件监听
		onUnmounted(() => {
			uni.$off('livestockSelected', handleLivestockSelected);
		});
	});


	// 提交表单
	const submitForm = async () => {
		const formData = {
			F_liveid: livestock.value.imei,
			F_EsTimateTime: livestock.value.predictedHeatTime,
			F_SjTimateTime: livestock.value.actualHeatTime,
			F_Opert: farmerInfo.value.name,
			F_Phone: farmerInfo.value.phone,
			F_Address: farmerInfo.value.address,
			F_Remark: remark.value
		};

		let res = await addBreeding(formData)
		console.log(res);
		if (res.code == 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		}
	};
</script>

<style scoped>
	.header {
		width: 100%;
		height: 95vh;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.title {
		height: 60rpx;
		width: 100%;
		background-color: #EFEFEF;
		padding-left: 20rpx;
		line-height: 60rpx;
	}

	.title1 {
		height: auto;
		width: 100%;
		padding: 20rpx;
		display: flex;
		align-items: flex-start;
	}

	.remark-input {
		flex: 1;
		min-height: 120rpx;
		padding: 10rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		line-height: 1.5;
	}

	.btn {
		width: 100%;
		height: 90rpx;
		background-color: #0BCB75;
		position: absolute;
		bottom: 0;
	}

	.item {
		display: flex;
		border: 2rpx solid #eee;
	}
</style>